$red: #D32B12;
$yellow: #FFE100;
$orange: #E99100;
$black: #22222d;
$gray: #55555d;
$light: #88888d;
$line: #c9c9c9;
$bg: #f6f6f6;

*{position:relative;margin:0;padding:0;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);}
html{width:100%;font-size:14px;}
body{width:100%;font-family:"Helvetica Neue",Helvetica,STHeiti,"Microsoft YaHei",Arial,Verdana,sans-serif;color:$gray;background-color:#f6f6f6;line-height:1.6;overflow-x:hidden;}
li{list-style-type:none}
a{text-decoration:none}
p{text-align: justify}
span{display:inline-block}
img{width:100%;height:auto}
input[type="text"],input[type="tel"],input[type="password"]{font-size:100%;border:none;outline:none;-webkit-appearance:none}
input[type="radio"],input[type="radio"]:checked{width:1.3em;height:1.3em;background-color:$bg;border:1px solid $gray;border-radius:.65em;-webkit-appearance:none}
input[type="radio"]:checked{border-width:.4em;}
input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0}
.hide{display:none!important;}
.trans{opacity:0!important;}
.bg{background-color:#f6f6f6}
.message_alert{
  position:fixed;top:40%;width:100%;text-align:center;z-index:9999;
  &>p{margin:auto;min-width:6em;padding:.3em .5em;color:#fff;text-align:center;font-size:100%;line-height:1.7em;background-color:#000;
    -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
    -webkit-box-shadow: 2px 2px 15px #55555d;-moz-box-shadow: 2px 2px 15px #55555d;box-shadow: 2px 2px 15px #55555d;
  }
}
.cover{position:fixed;top:0;left:0;right:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:9993;display:none}
.confirm,.dialog{margin:45% auto;width:230px;height:125px;background-color:#fff;border:none;border-radius:5px;overflow:hidden}
.confirm>p{margin:20px;line-height:1.8;text-align:center}
.confirm>p.middle{margin:40px 20px}
.confirm>footer{position:absolute;width:100%;height:2.5em;left:0;right:0;bottom:0}
.confirm>footer>.btn{width:50%;height:2.5em;line-height:2.5em;text-align:center;color:#fff;background-color:$line}
.confirm>footer>.btn:last-child{position:absolute;right:0;bottom:0;background-color:$red}
.dialog{min-height:150px}
.dialog>p{margin:20px;text-indent:2em}
.dialog>.btn,.confirm>.btn{position:absolute;width:50%;height:2em;bottom:20px;line-height:2em;text-align:center;color:#fff;left:25%;background-color:$red;border-radius:3px}
#loading{
  position:fixed;width:70px;height:70px;top:40%;left:40%;text-align:center;z-index:9998;display:none;
  >img{position:absolute;width:70px;height:70px;top:0;left:0;display:none;}
}
/* login */
.login_logo{width:100%;height:170px;text-align:center}
.login_logo .return{position:absolute;left:15px;top:15px;width:14px;height:14px;background:url("../img/icon_login_return.png") center center;background-size:cover;}
.login_logo>img{margin-top:20px;width:auto;height:130px}
.login_register{padding:0 50px;text-align:center}
.login_register ul{margin:0 auto}
.login_register li{position:relative;margin-bottom:15px;display:block}
.login_register li img{position:absolute;top:15px;left:15px;width:18px;height:18px;z-index:1}
.login_register li input{margin:auto;padding:0 15px 0 40px;width:100%;height:45px;font-size:100%;color:#c9c9c9;background-color:#f6f6f6;border:1px solid #dfdfdf;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;}
.login_register li:last-child{border:none}
.login_register li button{position:absolute;top:9px;right:10px;height:28px;width:80px;font-size:100%;color:#ff9c00;border:none;background-color:transparent}
.login_register .disabled{pointer-events:none;}
.login_register_submit,.login_submit{margin:50px auto 15px auto;width:100%;height:45px;font-size:120%;color:#fff;background-color:#ff9c00;border:1px solid #ff9c00;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;}
.login_submit{margin-top:30px;}
.login_forget_pwd{position:relative;width:100%;text-align:justify;color:#ff9c00;}
.login_forget_pwd>.right{position:absolute;right:0;}

/* shop */
#phone,#nickname{color:$gray}
.banner{margin:0;line-height:0}
.main{padding-bottom:80px}
.title{margin-left:15px;height:20px;line-height:20px;color:$light;font-size:80%}
.pet{margin-left:15px}
.plus{margin-left:5px;color:$black;text-decoration:underline}
.blank{width:2em}

@mixin radio-space{
  margin-right:.5em;top:.2em;
}
.goodlist,.infolist{background-color:#fff}
.goodlist>li{margin:auto 15px;height:50px;
	input[type=radio]{@include radio-space}
	>span{height:50px;line-height:50px}
	>.num{position:absolute;left:43%}
	>.price{position:absolute;right:0;font-size:120%;color:$black}
}
.goodlist>.out>.price{text-decoration:line-through}

.infolist>li{margin:auto 15px;padding:0 15px;height:3em;line-height:3em;border-top:.5px solid #f6f6f6}
.infolist>li>label{width:4em;display:inline-block}
.infolist>li>input[type=text]{position:absolute;padding:1em;width:70%;height:3em;top:0;right:15px}
.infolist>li>.radio{position:absolute;padding:0 1em;width:70%;top:0;right:15px}
.infolist>li>.radio>span>input{@include radio-space}

.submit{position:fixed;height:3.5em;left:0;right:0;bottom:0;border-top:.5px solid #f6f6f6;background-color:#fff;box-shadow:0 1px 3px #c9c9c9}
.submit>.btn{width:50%;height:3.5em;line-height:3.5em;text-align:center;color:#fff;background-color:$orange;display:inline-block}
.submit>.btn:last-child{position:absolute;top:0;right:0;background-color:$red}
.submit>.dis{background-color:$line!important;}

.error{text-align:center}
.errorimg{margin-top:25%;width:50%;height:auto}
.errortext{margin-top:30px;
	>h1{font-size:120%}
	>p{width:100%;text-align:center}
}
@media only screen and (max-width: 320px){
  html{font-size:12px;}
  .confirm,.dialog{width:180px;height:110px}
  .dialog{width:180px;min-height:140px}
}
